<template>
    <div class="confirm">
        <div class="base_header">
            <img src="../../assets/img/back.png" alt="" @click="goBack">确认订单
        </div>
        <div class="order_location mt10">
            <img src="../../assets/img/order/order-loca.png" alt="">
                <div>
                    <router-link :to="{path:'/set_local',query:{selectAddress:'yes'}}">
                    <p>收货人：{{orderDetail.receiverName}}</p>
                    <p>{{orderDetail.receiverMobile}} <img src="../../assets/img/goods/arrow.png" class="fr error" alt=""></p>
                    <p>地址：{{orderDetail.receiverAddress}}</p>
                    </router-link>
                </div>
        </div>
        <div class="goods_info" v-for="deliveryOrder in orderDetail.deliveryOrders">
            <div class="order_title">
                <img src="../../assets/img/order/shop_icon.png" alt="">
                <router-link :to="{path:'/shop',query:{shopId:deliveryOrder.shopId}}">{{deliveryOrder.shopName}} >
                </router-link>
            </div>
            <div class="order_info" v-for="product in deliveryOrder.products">
                <img :src="imageDomain+product.image" alt="">
                <div>
                    <p class="p1">{{product.name}}</p>
                    <p class="p2">{{product.spec}}</p>
                    <p class="p1"><span class="f14">￥{{product.price}}</span><span
                            class="fr f14">X{{product.quantity}}</span></p>
                </div>
                <div class="count clear">
                    <span style="display: inline-block;line-height: 31px">购买数量</span>
                    <span class="count_value">
                        <span><img @click="changeCount(product,0)" src="../../assets/img/goods/minus.png" alt=""></span>
                        <input type="text" disabled :value="product.quantity" style="background: #fff">
                        <span><img @click="changeCount(product,1)" src="../../assets/img/goods/add.png" alt=""></span>
                    </span>
                </div>
            </div>
            <div class="peisong">
                运费 <span class="fr">{{deliveryOrder.carriageAmount==0?'快递 免邮':'￥'+deliveryOrder.carriageAmount}}</span>
            </div>
            <div class="order_bar">
                <p class="f16"><span>共{{deliveryOrder.totalQuantity}}件商品</span> <span class="ml10">小计 <span
                        class="blue f12">￥{{deliveryOrder.totalAmount}}</span></span></p>
            </div>
        </div>
        <div class="order_bts">
            <span class="total">合计：<span class="blue f14">￥{{orderDetail.payAmount}}</span></span><span class="sub"
                                                                                                            @click="submitPayOrder()">提交订单</span>
        </div>
    </div>
</template>

<style>
    @import url("./confirm.css");
</style>
<script>
    import Layer from '../../assets/js/MessageBox'
    import API from '../../assets/js/API'
    import Validate from '../../assets/js/Validate'

    export default {
        data() {
            return {
                pay_type: {
                    wx: true,
                    alipay: false,
                },
                goods: this.$route.query.product,
                orderQuery: {itemId: this.$route.query.itemId, quantity: this.$route.query.goodCount},
                imageDomain: "",
                orderDetail: {},
                payOrder: {
                    products: [{productId: "", quantity: ""}],
                    receiverAddress: "",
                    receiverName: "",
                    receiverMobile: ""
                },
                payOrderResult: {},
                forwardProduct:{}
            }
        },
        created() {
             window.scrollTo(0,0);
            this.imageDomain = API.imageDomain;
            let token = localStorage.getItem('token');
            if (!token) {
                Layer.showMsg("您还未登录!");
                this.$router.push({path: '/login'});
                return
            }
            let url = API.serviceDomain + API.orderByQuick;
            this.$http.post(url, this.orderQuery).then(
                (res) => {
                    if (res.body.status == '000000') {
                        this.orderDetail = res.body.data;
                        this.forwardProduct = {id:this.orderDetail.deliveryOrders[0].products[0].itemId};
                    } else {
                        Layer.showMsg(res.body.message);
                    }
                },
                (error) => {
                    Layer.showMsg("服务器开小差了...")
                    return
                }
            )
        },
        mounted() {
            this.imageDomain = API.imageDomain;
            let token = localStorage.getItem('token');
            if (!token) {
                Layer.showMsg("您还未登录!");
                this.$router.push({path: '/login'});
            }
        },
        methods: {
            goBack() {
                this.$router.goBack()
            },
            checkMenu(type) {
                this.order.type = type;
            },
            choose_wx() {
                this.pay_type.wx = true;
                this.pay_type.alipay = false;
            },
            choose_ali() {
                this.pay_type.wx = false;
                this.pay_type.alipay = true;
            },
            changeCount(product, type) {
                if (type == 0) {
                    if (product.quantity > 1) {
                        product.quantity--;
                    }
                } else {
                    product.quantity++;
                }
                this.countCommit();
            },
            countCommit() {
                let url = API.serviceDomain + API.orderByQuick;
                this.orderQuery.quantity = this.orderDetail.deliveryOrders[0].products[0].quantity;
                this.$http.post(url, this.orderQuery).then(
                    (res) => {
                        if (res.body.status == '000000') {
                            this.orderDetail = res.body.data;
                        } else {
                            Layer.showMsg(res.body.message);
                        }
                    },
                    (error) => {
                        Layer.showMsg("服务器开小差了...")
                        return
                    }
                )
            },
            submitPayOrder() {
                this.payOrder.receiverAddress = this.orderDetail.receiverAddress;
                this.payOrder.receiverName = this.orderDetail.receiverName;
                this.payOrder.receiverMobile = this.orderDetail.receiverMobile;
                let product = [{
                    itemId: this.orderDetail.deliveryOrders[0].products[0].itemId,
                    quantity: this.orderDetail.deliveryOrders[0].products[0].quantity
                }];
                if (product.productId <= 0) {
                    Layer.showMsg("商品信息错误，请重新下单.");
                    return
                }
                if (product.quantity <= 0) {
                    Layer.showMsg("商品数量错误，请重新下单.");
                    return
                }
                this.payOrder.products = product;
                let url = API.serviceDomain + API.orderSubmit;
                console.log(this.payOrder);
                this.$http.post(url, this.payOrder).then(
                    (res) => {
                        if (res.body.status == '000000') {
                            this.payOrderResult = res.body.data;
                            this.$router.push({path: '/channel', query: {'payOrder': this.payOrderResult}})
                        } else {
                            Layer.showMsg(res.body.message);
                        }
                    },
                    (error) => {
                        Layer.showMsg("服务器开小差了...")
                        return
                    }
                )
            }
        }
    }
</script>
